import React, { useState } from "react";
import Navigation from "./Navigation";
import { Layout, PageHeader } from "antd";
import { Content } from "antd/lib/layout/layout";
import Sider from "antd/lib/layout/Sider";
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import styled from "@emotion/styled";
import { FlexContentBox } from "../styled";

interface Props {
    children: React.ReactNode,
    title?: string,
    subTitle?: string
    className?: string
}

const PageLayout: React.FC<Props> = ({ children, title, subTitle, className }) => {

    const [collapsed, setCollapsed] = useState(false)

    return <Container className={className}>
        <Sider theme={'light'} trigger={null} collapsible collapsed={collapsed}>
            <Navigation collapsed={collapsed} />
        </Sider>
        <MainContainer>
            <MainHeader>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    onClick: () => setCollapsed(!collapsed),
                })}
                <PageHeader ghost={false} title={title} subTitle={subTitle} />
            </MainHeader>
            <Content>
                {children}
            </Content>
        </MainContainer>
    </Container>
}

const Container = styled(Layout)`
display: flex;
flex-direction: row;
height: 100vh;
`
const MainContainer = styled(Layout)`
height: 100vh;
`

const MainHeader = styled(FlexContentBox)`
padding-left: 20px;
height: auto;
background-color: #FFF;
`

export default PageLayout